<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="bg-pattern"></div>
      <div class="floating-elements">
        <div class="floating-circle circle-1"></div>
        <div class="floating-circle circle-2"></div>
        <div class="floating-circle circle-3"></div>
        <div class="floating-square square-1"></div>
        <div class="floating-square square-2"></div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="login-wrapper">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h1 class="brand-title">勤工助学管理系统</h1>
          <p class="brand-subtitle">Student Work-Study Management System</p>
          <div class="brand-description">
            <p class="welcome-text">欢迎使用学生勤工助学管理平台</p>
            <p class="system-intro">智能化管理，提升工作效率</p>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-section">
        <!-- 登录表单 -->
        <div class="form-card" :class="{ 'form-hidden': isRegisterMode }">
          <div class="form-header">
            <h2 class="form-title">用户登录</h2>
            <p class="form-subtitle">请输入您的账号信息</p>
          </div>

          <el-form 
            :model="loginForm" 
            :rules="loginRules" 
            ref="loginFormRef" 
            class="form-content"
            @keyup.enter="onLogin"
          >
            <div class="form-group">
              <label class="form-label">用户名</label>
              <el-input 
                v-model="loginForm.username" 
                placeholder="请输入用户名" 
                size="large"
                class="custom-input"
                :prefix-icon="User"
              />
            </div>
            
            <div class="form-group">
              <label class="form-label">密码</label>
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                placeholder="请输入密码" 
                size="large"
                class="custom-input"
                :prefix-icon="Lock"
                show-password
              />
            </div>

            <!-- 登录按钮 -->
            <el-button 
              type="primary" 
              @click="onLogin" 
              :loading="loginLoading" 
              size="large" 
              class="submit-button"
            >
              <span v-if="!loginLoading">登录</span>
              <span v-else>登录中...</span>
            </el-button>

            <!-- 切换到注册 -->
            <div class="switch-section">
              <span class="switch-text">还没有账号？</span>
              <el-button 
                type="text" 
                @click="switchToRegister" 
                class="switch-link"
              >
                立即注册
              </el-button>
            </div>
          </el-form>

          <!-- 消息提示 -->
          <el-alert 
            v-if="loginMsg" 
            :title="loginMsg" 
            :type="loginMsgType" 
            show-icon 
            class="message-alert"
            :closable="false"
          />
        </div>

        <!-- 注册表单 -->
        <div class="form-card" :class="{ 'form-hidden': !isRegisterMode }">
          <div class="form-header">
            <h2 class="form-title">用户注册</h2>
            <p class="form-subtitle">请填写注册信息</p>
          </div>

          <el-form 
            :model="registerForm" 
            :rules="registerRules" 
            ref="registerFormRef" 
            class="form-content"
            @keyup.enter="onRegister"
          >
            <div class="form-group">
              <label class="form-label">用户名</label>
              <el-input 
                v-model="registerForm.username" 
                placeholder="请输入用户名" 
                size="large"
                class="custom-input"
                :prefix-icon="User"
              />
            </div>
            
            <div class="form-group">
              <label class="form-label">密码</label>
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                placeholder="请输入密码" 
                size="large"
                class="custom-input"
                :prefix-icon="Lock"
                show-password
              />
            </div>

            <div class="form-group">
              <label class="form-label">确认密码</label>
              <el-input 
                v-model="registerForm.confirmPassword" 
                type="password" 
                placeholder="请再次输入密码" 
                size="large"
                class="custom-input"
                :prefix-icon="Lock"
                show-password
              />
            </div>

            <div class="form-group">
              <label class="form-label">邮箱</label>
              <el-input 
                v-model="registerForm.email" 
                placeholder="请输入邮箱地址" 
                size="large"
                class="custom-input"
                :prefix-icon="Message"
              />
            </div>

            <div class="form-group">
              <label class="form-label">手机号</label>
              <el-input 
                v-model="registerForm.phone" 
                placeholder="请输入手机号码" 
                size="large"
                class="custom-input"
                :prefix-icon="Phone"
              />
            </div>

            <!-- 注册和取消按钮 -->
            <div class="button-group">
              <el-button 
                type="primary" 
                @click="onRegister" 
                :loading="registerLoading" 
                size="large" 
                class="submit-button register-btn"
              >
                <span v-if="!registerLoading">注册</span>
                <span v-else>注册中...</span>
              </el-button>
              
              <el-button 
                @click="switchToLogin" 
                size="large" 
                class="cancel-button"
              >
                取消
              </el-button>
            </div>

            <!-- 切换到登录 -->
            <div class="switch-section">
              <span class="switch-text">已有账号？</span>
              <el-button 
                type="text" 
                @click="switchToLogin" 
                class="switch-link"
              >
                立即登录
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { User, Lock, Message, Phone, ArrowLeft } from '@element-plus/icons-vue'
import axios from 'axios'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 模式切换
const isRegisterMode = ref(false)

// 登录表单
const loginForm = ref({
  username: '',
  password: '',
})

const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

const loginFormRef = ref()
const loginLoading = ref(false)
const loginMsg = ref('')
const loginMsgType = ref('')

// 注册表单
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: '',
})

// 注册验证规则
const validateConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.value.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const validateEmail = (rule, value, callback) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (value === '') {
    callback(new Error('请输入邮箱地址'))
  } else if (!emailRegex.test(value)) {
    callback(new Error('请输入正确的邮箱格式'))
  } else {
    callback()
  }
}

const validatePhone = (rule, value, callback) => {
  const phoneRegex = /^1[3-9]\d{9}$/
  if (value === '') {
    callback(new Error('请输入手机号码'))
  } else if (!phoneRegex.test(value)) {
    callback(new Error('请输入正确的手机号格式'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: 'blur' }
  ],
  email: [
    { required: true, validator: validateEmail, trigger: 'blur' }
  ],
  phone: [
    { required: true, validator: validatePhone, trigger: 'blur' }
  ]
}

const registerFormRef = ref()
const registerLoading = ref(false)

// 登录功能
const onLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) return
    loginLoading.value = true
    loginMsg.value = ''
    try {
      const res = await axios.post('/api/login', {
        username: loginForm.value.username,
        password: loginForm.value.password
      })
      if (res.data.code === 0) {
        const role = res.data.data.role
        const userInfo = {
          name: loginForm.value.username,
          avatar: '/avatar.png',
          role: role
        }

        // 根据角色设置不同的用户名
        if (role === 1) {
          userInfo.name = '张同学'
        } else if (role === 2) {
          userInfo.name = '李老师'
        } else if (role === 0) {
          userInfo.name = '王管理员'
        }

        userStore.login(role, userInfo)
        loginMsg.value = '登录成功，正在跳转...'
        loginMsgType.value = 'success'
        localStorage.setItem('token', res.data.data.token)
        setTimeout(() => {
          if (role === 1) router.push('/student')
          else if (role === 2) router.push('/teacher')
          else if (role === 0) router.push('/admin')
        }, 100)
      } else {
        loginMsg.value = res.data.msg
        loginMsgType.value = 'error'
      }
    } catch (e) {
      loginMsg.value = e.msg || '网络错误'
      loginMsgType.value = 'error'
    } finally {
      loginLoading.value = false
    }
  })
}

// 注册功能
const onRegister = () => {
  registerFormRef.value.validate(async (valid) => {
    if (!valid) return
    // 格式校驗
    const usernameRegex = /^\w{3,20}$/
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!registerForm.value.username) {
      ElMessage.closeAll();
      ElMessage({
        message: '用户名不能为空',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!usernameRegex.test(registerForm.value.username)) {
      ElMessage.closeAll();
      ElMessage({
        message: '用户名格式不正确（3-20位，仅字母、数字、下划线）',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!registerForm.value.password) {
      ElMessage.closeAll();
      ElMessage({
        message: '密码不能为空',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!passwordRegex.test(registerForm.value.password)) {
      ElMessage.closeAll();
      ElMessage({
        message: '密码格式不正确（6-20位，必须包含字母和数字）',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!registerForm.value.email) {
      ElMessage.closeAll();
      ElMessage({
        message: '邮箱不能为空',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!emailRegex.test(registerForm.value.email)) {
      ElMessage.closeAll();
      ElMessage({
        message: '邮箱格式不正确',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!registerForm.value.phone) {
      ElMessage.closeAll();
      ElMessage({
        message: '手机号码不能为空',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    if (!phoneRegex.test(registerForm.value.phone)) {
      ElMessage.closeAll();
      ElMessage({
        message: '手机号码格式不正确（中国大陆11位手机号）',
        type: 'error', center: true, showClose: true, duration: 2000, offset: 30
      })
      return
    }
    // 密码一致性判断
    if (registerForm.value.password !== registerForm.value.confirmPassword) {
      ElMessage.closeAll();
      ElMessage({
        message: '两次输入密码不相同',
        type: 'error',
        center: true,
        showClose: true,
        duration: 2000,
        offset: 30
      })
      return
    }
    registerLoading.value = true
    try {
      const res = await request.post('/api/register', {
        username: registerForm.value.username,
        password: registerForm.value.password,
        email: registerForm.value.email,
        phone: registerForm.value.phone
      })
      // 成功时弹出消息
      ElMessage.closeAll();
      ElMessage({
        message: '注册成功，正在跳转到登录页面...',
        type: 'success',
        center: true,
        showClose: true,
        duration: 1500,
        offset: 30
      })
      setTimeout(() => {
        switchToLogin()
        // 清空注册表单
        registerForm.value = {
          username: '',
          password: '',
          confirmPassword: '',
          email: '',
          phone: ''
        }
      }, 1500)
    } catch (e) {
      ElMessage.closeAll();
      ElMessage({
        message: (e && e.msg) ? e.msg : '网络错误，请稍后重试',
        type: 'error',
        center: true,
        showClose: true,
        duration: 2000,
        offset: 30
      })
    } finally {
      registerLoading.value = false
    }
  })
}

// 切换到注册模式
const switchToRegister = () => {
  isRegisterMode.value = true
  loginMsg.value = ''
  // 清空注册表单
  registerForm.value = {
    username: '',
    password: '',
    confirmPassword: '',
    email: '',
    phone: ''
  }
}

// 切换到登录模式
const switchToLogin = () => {
  isRegisterMode.value = false
  // 清空注册表单
  registerForm.value = {
    username: '',
    password: '',
    confirmPassword: '',
    email: '',
    phone: ''
  }
}
</script>

<style scoped>
/* 企业级登录界面样式 - 全屏显示 */
.login-container {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  background-size: 400px 400px;
  animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400px 400px;
  }
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 15%;
  animation-delay: 2s;
}

.circle-3 {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.floating-square {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
  transform: rotate(45deg);
}

.square-1 {
  width: 60px;
  height: 60px;
  top: 15%;
  right: 25%;
  animation-delay: 1s;
}

.square-2 {
  width: 40px;
  height: 40px;
  bottom: 15%;
  right: 20%;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* 主要内容包装器 */
.login-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  max-width: 1200px;
  height: 800px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  margin: 20px;
}

/* 左侧品牌区域 */
.brand-section {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.brand-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 400px;
}

.brand-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.brand-logo svg {
  width: 40px;
  height: 40px;
  color: white;
}

.brand-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px 0;
  letter-spacing: 1px;
  animation: slideInUp 0.8s ease-out;
}

.brand-subtitle {
  font-size: 16px;
  margin: 0 0 40px 0;
  opacity: 0.9;
  font-weight: 400;
  animation: slideInUp 0.8s ease-out 0.2s both;
}

.brand-description {
  text-align: left;
  line-height: 1.8;
  animation: slideInUp 0.8s ease-out 0.4s both;
}

.welcome-text {
  margin: 8px 0;
  font-size: 16px;
  opacity: 0.8;
}

.system-intro {
  margin: 8px 0;
  font-size: 16px;
  opacity: 0.8;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右侧表单区域 */
.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  position: relative;
}

.form-card {
  width: 100%;
  max-width: 400px;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

.form-card.form-hidden {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
  animation: slideInUp 0.8s ease-out;
  position: relative;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  color: white;
  margin: 0 0 8px 0;
}

.form-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* 表单样式 */
.form-content {
  margin-bottom: 24px;
  animation: slideInUp 0.8s ease-out 0.2s both;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-bottom: 8px;
}

.custom-input :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  box-shadow: none;
  height: 48px;
  backdrop-filter: blur(10px);
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.custom-input :deep(.el-input__inner) {
  font-size: 14px;
  color: white;
  height: 24px;
  line-height: 24px;
}

.custom-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.custom-input :deep(.el-input__prefix-inner) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

/* 提交按钮 */
.submit-button {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.submit-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.submit-button:active {
  transform: translateY(0);
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.register-btn {
  flex: 2;
  margin-bottom: 0;
}

.cancel-button {
  flex: 1;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cancel-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cancel-button:active {
  transform: translateY(0);
}

/* 切换区域 */
.switch-section {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  animation: slideInUp 0.8s ease-out 0.4s both;
}

.switch-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.switch-link {
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.3s ease;
}

.switch-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* 消息提示 */
.message-alert {
  margin-top: 16px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: slideInUp 0.8s ease-out 0.6s both;
}

.message-alert :deep(.el-alert__content) {
  padding: 12px 16px;
}

.message-alert :deep(.el-alert__title) {
  color: white;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .login-wrapper {
    flex-direction: column;
    height: auto;
    max-width: 500px;
  }
  
  .brand-section {
    flex: none;
    height: 300px;
    padding: 40px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .brand-title {
    font-size: 24px;
  }
  
  .brand-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .form-section {
    flex: 1;
    padding: 40px 20px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
  }
  
  .login-wrapper {
    margin: 0;
    border-radius: 16px;
  }
  
  .brand-section {
    height: 200px;
    padding: 30px 20px;
  }
  
  .brand-logo {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }
  
  .brand-logo svg {
    width: 30px;
    height: 30px;
  }
  
  .brand-title {
    font-size: 20px;
  }
  
  .form-section {
    padding: 30px 20px;
  }
  
  .form-title {
    font-size: 24px;
  }
  
  .form-label {
    font-size: 13px;
  }
  
  .custom-input :deep(.el-input__wrapper) {
    height: 44px;
    padding: 10px 14px;
  }
  
  .submit-button {
    height: 44px;
    font-size: 15px;
  }
  
  .button-group {
    gap: 8px;
  }
  
  .cancel-button {
    height: 44px;
    font-size: 15px;
  }
}

/* 确保在全局样式下正常显示 */
:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__content) {
  line-height: normal;
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.submit-button:deep(.el-loading-spinner) {
  animation: pulse 1.5s ease-in-out infinite;
}
</style> 